<template>
    <div>
        <a-layout id="components-layout-demo-top-side-2">
            <a-layout-header class="header">
                <h1 style="color: #fff;">钉钉机器人后台管理系统</h1>
                <h3 style="color: #fff;" class="name">欢迎登录-{{ name }}</h3>
            </a-layout-header>
            <layout />
            <a-layout>
                <a-layout-sider width="200" style="background: #fff">
                  <a-menu mode="inline" :default-selected-keys="['1']" :default-open-keys="['sub1']"
                        style="{ height: '100%', borderRight: 0 }">
                        <a-sub-menu key="sub1">
                            <span slot="title"><a-icon type="robot" />机器人管理</span>
                            <a-menu-item key="1">
                                <router-link to="/home/robotManage">机器人管理</router-link>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <router-link to="/home/timerTask">定时任务管理</router-link>
                            </a-menu-item>
                        </a-sub-menu>
                        <a-sub-menu key="sub2">
                            <span slot="title"><a-icon type="github" />资源管理</span>
                            <a-menu-item key="3">
                                <router-link to="/home/robotPerson">个人资源</router-link>
                            </a-menu-item>
                            <a-menu-item key="4">
                                <router-link to="/home/robotPart">部门资源</router-link>
                            </a-menu-item>
                            <a-menu-item key="5">
                                <router-link to="/home/robotOpen">公开资源</router-link>
                            </a-menu-item>
                        </a-sub-menu>
                        <!-- ------------------------------------------------------- -->
                        <a-sub-menu key="sub3">
                            <span slot="title"><a-icon type="laptop" />考勤组管理</span>
                            <a-menu-item key="5">
                                <router-link to="/home/department">部门考勤管理</router-link>
                            </a-menu-item>
                            <a-menu-item key="6">
                                <router-link to="/home/group">考勤组管理</router-link>
                            </a-menu-item>
                        </a-sub-menu>
                    </a-menu>
                </a-layout-sider>
                <a-layout style="padding: 0 24px 24px">
                    <a-breadcrumb style="margin: 16px 0">
                        <!-- <a-breadcrumb-item>Home</a-breadcrumb-item>
                        <a-breadcrumb-item>List</a-breadcrumb-item>
                        <a-breadcrumb-item>App</a-breadcrumb-item> -->
                    </a-breadcrumb>
                    <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
                        <router-view></router-view>
                    </a-layout-content>
                </a-layout>
            </a-layout>
        </a-layout>
    </div>
</template>
  
<script>
// import robotManage from './robotManage.vue';
// import timerTask from './timerTask.vue';
import layout from '@/components/layout.vue';

export default {
    components: {
        layout,
    },
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            collapsed: false,
            isRouterAlive: true,
            name: ''
        };
    },

    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        }
    },
    mounted() {
        this.name = localStorage.getItem('name');
    },
};
</script>
  
<style>
h1 {
    text-align: center;
}

#components-layout-demo-top-side-2 .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 28px 16px 0;
    float: left;
}

.out {
    position: absolute;
    width: 100px;
    margin-left: 90%;
    margin-top: -32px;
}

.name {
    margin-top: -57px;
    margin-left: 70%;
}
</style>
  